{% extends "base.html" %}

{% block title %}My Documents — Quick Care Connect{% endblock %}

{% block content %}
<div class="container py-4">
  <div class="row">

    <!-- ═══════════════ LEFT COLUMN ═══════════════ -->
    <div class="col-lg-8">

      <!-- Header -->
      <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
          <h2 class="mb-1">My Medical Documents</h2>
          <p class="text-muted mb-0">Lab reports, X-rays, old prescriptions and other records</p>
        </div>
        <a href="{{ url_for('patients.medical_history') }}" class="btn btn-outline-secondary btn-sm">
          <i class="fas fa-arrow-left me-1"></i> Medical History
        </a>
      </div>

      <!-- Upload Form -->
      <div class="card mb-4 border-primary">
        <div class="card-header bg-primary text-white">
          <h5 class="mb-0"><i class="fas fa-upload me-2"></i>Upload New Document</h5>
        </div>
        <div class="card-body">
          <form action="{{ url_for('patients.upload_document') }}" method="POST" enctype="multipart/form-data"
            id="uploadForm">

            <div class="row g-3">
              <!-- File picker -->
              <div class="col-12">
                <label class="form-label fw-semibold">Select File <span class="text-danger">*</span></label>
                <div class="upload-area" id="uploadArea" onclick="document.getElementById('docFile').click()">
                  <i class="fas fa-cloud-upload-alt fa-3x text-primary mb-3"></i>
                  <p class="mb-1 fw-semibold">Click to browse or drag & drop</p>
                  <p class="text-muted small mb-0">PDF, JPG, PNG, WebP — max 10 MB</p>
                  <div id="filePreview" class="mt-3" style="display:none;">
                    <span class="badge bg-success px-3 py-2 fs-6" id="fileNameBadge"></span>
                  </div>
                </div>
                <input type="file" id="docFile" name="document" accept=".pdf,.jpg,.jpeg,.png,.webp" class="d-none"
                  onchange="previewFile(this)">
              </div>

              <!-- Category -->
              <div class="col-md-6">
                <label class="form-label fw-semibold">Document Type <span class="text-danger">*</span></label>
                <select name="document_category" class="form-select" required>
                  <option value="">— Select type —</option>
                  {% for value, label in document_categories %}
                  <option value="{{ value }}">{{ label }}</option>
                  {% endfor %}
                </select>
              </div>

              <!-- Description -->
              <div class="col-md-6">
                <label class="form-label fw-semibold">Description <span
                    class="text-muted fw-normal">(optional)</span></label>
                <input type="text" name="description" class="form-control"
                  placeholder="e.g. CBC test from Jan 2026, Dr. Ahmed's X-ray" maxlength="300">
              </div>

              <div class="col-12">
                <button type="submit" class="btn btn-primary px-4" id="submitBtn">
                  <i class="fas fa-upload me-2"></i>Upload Document
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>

      <!-- Documents list -->
      {% if documents %}
      <h5 class="mb-3 text-muted">{{ documents|length }} document{{ 's' if documents|length != 1 }}</h5>

      <div class="row g-3">
        {% for doc in documents %}
        <div class="col-md-6">
          <div class="card h-100 doc-card {% if not doc.is_visible_to_doctor %}border-warning{% endif %}">
            <div class="card-body">

              <!-- Icon + filename -->
              <div class="d-flex align-items-start mb-3">
                <div class="doc-icon me-3">
                  {% if doc.file_type == 'pdf' %}
                  <i class="fas fa-file-pdf fa-2x text-danger"></i>
                  {% else %}
                  <i class="fas fa-file-image fa-2x text-primary"></i>
                  {% endif %}
                </div>
                <div class="flex-grow-1 min-w-0">
                  <h6 class="mb-1 text-truncate" title="{{ doc.filename }}">{{ doc.filename }}</h6>
                  <span class="badge bg-info-subtle text-info border border-info-subtle">
                    {{ doc.category_display }}
                  </span>
                  {% if not doc.is_visible_to_doctor %}
                  <span class="badge bg-warning-subtle text-warning border border-warning-subtle ms-1">
                    <i class="fas fa-eye-slash me-1"></i>Hidden from doctors
                  </span>
                  {% endif %}
                </div>
              </div>

              {% if doc.description %}
              <p class="small text-muted mb-2">{{ doc.description }}</p>
              {% endif %}

              <p class="small text-muted mb-3">
                <i class="fas fa-calendar me-1"></i>{{ doc.uploaded_at.strftime('%d %b %Y') }}
                &nbsp;&bull;&nbsp;
                <i class="fas fa-weight me-1"></i>
                {% if doc.file_size < 1024 %}{{ doc.file_size }} B {% elif doc.file_size < 1048576 %}{{ (doc.file_size /
                  1024)|round(1) }} KB {% else %}{{ (doc.file_size / 1048576)|round(1) }} MB {% endif %} </p>

                  <!-- Actions -->
                  <div class="d-flex gap-2 flex-wrap">
                    <a href="{{ url_for('static', filename=doc.file_path) }}" target="_blank"
                      class="btn btn-sm btn-outline-primary">
                      <i class="fas fa-eye me-1"></i>View
                    </a>
                    <a href="{{ url_for('static', filename=doc.file_path) }}" download="{{ doc.filename }}"
                      class="btn btn-sm btn-outline-secondary">
                      <i class="fas fa-download me-1"></i>Download
                    </a>
                    <form action="{{ url_for('patients.toggle_document_visibility', doc_id=doc.id) }}" method="POST"
                      class="d-inline">
                      <button type="submit" class="btn btn-sm btn-outline-warning" title="Toggle doctor visibility">
                        <i class="fas fa-{{ 'eye-slash' if doc.is_visible_to_doctor else 'eye' }}"></i>
                      </button>
                    </form>
                    <form action="{{ url_for('patients.delete_document', doc_id=doc.id) }}" method="POST"
                      class="d-inline" onsubmit="return confirm('Delete {{ doc.filename }}? This cannot be undone.')">
                      <button type="submit" class="btn btn-sm btn-outline-danger">
                        <i class="fas fa-trash"></i>
                      </button>
                    </form>
                  </div>

            </div>
          </div>
        </div>
        {% endfor %}
      </div>

      {% else %}
      <div class="text-center py-5">
        <i class="fas fa-folder-open fa-4x text-muted mb-3"></i>
        <h5 class="text-muted">No documents uploaded yet</h5>
        <p class="text-muted">Upload lab reports, X-rays, or other medical records to keep everything in one place.</p>
      </div>
      {% endif %}

    </div>

    <!-- ═══════════════ RIGHT SIDEBAR ═══════════════ -->
    <div class="col-lg-4">

      <div class="card mb-4">
        <div class="card-header">
          <h6 class="mb-0"><i class="fas fa-info-circle me-2"></i>What can you upload?</h6>
        </div>
        <div class="card-body">
          <ul class="list-unstyled mb-0 small">
            <li class="mb-2"><i class="fas fa-flask text-primary me-2"></i><strong>Lab Reports</strong> — CBC, LFTs,
              HbA1c…</li>
            <li class="mb-2"><i class="fas fa-x-ray text-warning me-2"></i><strong>X-Rays</strong> — chest, bone,
              dental…</li>
            <li class="mb-2"><i class="fas fa-radiation-alt text-danger me-2"></i><strong>CT / MRI Scans</strong></li>
            <li class="mb-2"><i class="fas fa-file-prescription text-success me-2"></i><strong>Old
                Prescriptions</strong></li>
            <li><i class="fas fa-file-alt text-info me-2"></i><strong>Any other records</strong></li>
          </ul>
        </div>
      </div>

      <div class="card mb-4">
        <div class="card-header">
          <h6 class="mb-0"><i class="fas fa-shield-alt me-2"></i>Privacy</h6>
        </div>
        <div class="card-body small">
          <p class="mb-2">By default all uploaded documents are <strong>visible to your doctors</strong> during
            consultations.</p>
          <p class="mb-0">Use the <i class="fas fa-eye-slash text-warning"></i> button to hide sensitive documents from
            doctor view at any time.</p>
        </div>
      </div>

      <div class="card">
        <div class="card-header">
          <h6 class="mb-0"><i class="fas fa-bolt me-2"></i>Quick Links</h6>
        </div>
        <div class="card-body d-grid gap-2">
          <a href="{{ url_for('patients.medical_history') }}" class="btn btn-outline-primary btn-sm">
            <i class="fas fa-history me-2"></i>View Medical History
          </a>
          <a href="{{ url_for('patients.find_doctors') }}" class="btn btn-outline-secondary btn-sm">
            <i class="fas fa-search me-2"></i>Find Doctors
          </a>
        </div>
      </div>

    </div>
  </div>
</div>

<style>
  .upload-area {
    border: 2px dashed var(--bs-primary, #0d6efd);
    border-radius: 12px;
    padding: 2.5rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s;
    background: #f8f9ff;
  }

  .upload-area:hover {
    background: #eef0ff;
  }

  .doc-card {
    transition: box-shadow 0.2s;
    border-radius: 12px;
  }

  .doc-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
  }

  .doc-icon {
    flex-shrink: 0;
  }

  .min-w-0 {
    min-width: 0;
  }
</style>

<script>
  function previewFile(input) {
    if (input.files && input.files[0]) {
      const name = input.files[0].name;
      document.getElementById('fileNameBadge').textContent = name;
      document.getElementById('filePreview').style.display = 'block';
    }
  }

  // Drag and drop support
  const area = document.getElementById('uploadArea');
  area.addEventListener('dragover', (e) => { e.preventDefault(); area.style.background = '#e0e4ff'; });
  area.addEventListener('dragleave', () => { area.style.background = '#f8f9ff'; });
  area.addEventListener('drop', (e) => {
    e.preventDefault();
    area.style.background = '#f8f9ff';
    const dt = e.dataTransfer;
    if (dt.files.length) {
      document.getElementById('docFile').files = dt.files;
      previewFile(document.getElementById('docFile'));
    }
  });

  // Form validation and loading
  document.getElementById('uploadForm').addEventListener('submit', (e) => {
    const fileInput = document.getElementById('docFile');
    if (!fileInput.value) {
      e.preventDefault();
      alert('Please select a document to upload first.');
      return;
    }

    const btn = document.getElementById('submitBtn');
    // Delay disabling so the browser has time to register the form submission
    setTimeout(() => {
      btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Uploading…';
      btn.disabled = true;
    }, 10);
  });
</script>
{% endblock %}